<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增广告管理')" />
    <th:block th:include="include :: jasny-bootstrap-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-carousel-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">类型：</label>
                <div class="col-sm-8">
                    <select id="type" name="type" class="form-control m-b">
                        <option value="0">图片</option>
                        <option value="1">视频</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">标题：</label>
                <div class="col-sm-8">
                    <input name="title" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">副标题：</label>
                <div class="col-sm-8">
                    <input name="fuTitle" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">缩略图地址：</label>
                <div class="col-sm-8">
                    <div class="fileinput fileinput-new" data-provides="fileinput">
                        <div class="fileinput-preview thumbnail" data-trigger="fileinput"
                             style="width: 200px; height: 150px;"></div>
                        <div>
                        <span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span
                                class="fileinput-exists">更改</span><input type="file"  id="imageUrlFile" ></span>
                            <a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                            <input type="hidden" name="thumbnailUrl"  id="thumbnailUrl" >
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group" id="linkAddr_box">
                <label class="col-sm-3 control-label">文件地址：</label>
                <div class="col-sm-8">
                    <input name="fileUrl" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group" >
                <label class="col-sm-3 control-label is-required">链接地址：</label>
                <div class="col-sm-8">
                    <textarea name="linkAddr" class="form-control" required></textarea>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">打开方式：</label>
                <div class="col-sm-8">
                    <select name="isBlank" class="form-control">
                        <option value="1" >当前页面</option>
                        <option value="2" >新标签页</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">发布区域：</label>
                <div class="col-sm-8">
                    <select name="domain" class="form-control">
                        <option value="1" >web</option>
                        <option value="2" >app</option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('sys_common_status')}">
                        <input type="radio" th:id="${'status_' + dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}">
                        <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">排序：</label>
                <div class="col-sm-8">
                    <input name="orderNum" class="form-control" type="number">
                </div>
            </div>

            <div class="form-group">    
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="remarks" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: jasny-bootstrap-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "xsp/carousel"
        $("#form-carousel-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-carousel-add').serialize());
            }
        }
        //类型控制显示字段
        $(function () {
            //初始化设置是否显示
            linkAddrChange();
        })
        $("#type").on("change",function (e) {
            linkAddrChange();
        });
        function linkAddrChange()
        {
            if($("#type").val()=="0"){
                $("#linkAddr_box").hide();
            }else {
                $("#linkAddr_box").show();
            }
        }
        //图片上传
        $('#imageUrlFile').on('clear.bs.fileinput ', function (e) {
            $('#thumbnailUrl').val("");
        });
        $('#imageUrlFile').on('change.bs.fileinput ', function (e) {
            uploadQiNiuBindingTag("#thumbnailUrl",this);
        });

    </script>
</body>
</html>